<template>
  <section>
    <!-- tool bar -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="conditions">
        <el-form-item>
          <el-input v-model="conditions.mobile" placeholder="还款人手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="conditionQuery">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- list -->
    <el-table :data="lists" highlight-current-row border v-loading="loading" style="width: 100%;">
      <el-table-column prop="repay_id" label="还款明细id号" width="120" fixed></el-table-column>
      <el-table-column prop="project_no" label="项目id号" width="120"></el-table-column>
      <el-table-column prop="loan_name" label="标的名称" width="200"></el-table-column>
      <el-table-column prop="loan_user_id" label="借款人id号" width="120"></el-table-column>
      <el-table-column prop="loan_user_name" label="借款人" width="150"></el-table-column>
      <el-table-column prop="periods" label="还款总期数" width="110"></el-table-column>
      <el-table-column prop="period" label="还款期数" width="100"></el-table-column>
      <el-table-column prop="repay_principal_interest" label="还款金额" width="150"></el-table-column>
      <el-table-column prop="repayment_status" label="还款状态" width="120" :formatter="formatRepayStatus"></el-table-column>
      <el-table-column prop="repay_await_date" label="还款日期" width="200"></el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button @click="submit(scope.$index, scope.row)" v-if="scope.row.repay_await_date < time" type="primary" size="small">本期确认还款</el-button>
          <el-button v-else type="primary" :disabled="true" size="small">还款日期未到</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-col :span="24" class="toolbar">
      <el-pagination class="pagination" layout="prev, pager, next" :current-page="curPage" :page-size="pageSize" :total="total"
        @current-change="handleChange">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'

  export default {
    computed: {
      ...mapGetters({
        lists: 'normalRepayment_repays',
        loading: 'normalRepayment_loading',
        conditions: 'normalRepayment_conditions',
        time: 'normalRepayment_checkedTime',
        total: 'normalRepayment_total',
        curPage: 'normalRepayment_curPage',
        pageSize: 'normalRepayment_pageSize'
      })
    },

    methods: {
      ...mapActions([
        'getNormalRepays',
        'confirmNormalRepay'
      ]),
      /**
       * 条件查询
       */
      conditionQuery() {
        this.getNormalRepays({
          vm: this,
          page: 1,
          mobile: this.conditions.mobile
        });
      },
      /**
       * 条件重置
       */
      reset() {
        this.conditions.mobile = '';
      },
      /**
       * 还款状态格式化
       */
      formatRepayStatus(row, column) {
        return row.repayment_status == 0 ? '未审核' : row.repayment_status;
      },
      handleChange(val) {
        this.getNormalRepays({
          vm: this,
          page: val
        });
      },
      submit(index, row) {
        this.confirmNormalRepay({
          vm: this,
          row: row,
          cb: () => {
            this.getNormalRepays({
              vm: this
            });
          }
        });
      }
    },

    mounted() {
      this.getNormalRepays({
        vm: this
      });
    }
  }
</script>